<script setup>
import axiosInstance from '@/utils/request'
import { useUserStore } from '@/stores/user'
import { ref, onMounted,watchEffect } from 'vue'
import router from '@/router'
import { HEART_MESSAGE, WS_BASE_URL } from '@/utils/constant.js'
import { useMessageStore } from '@/stores/unread.js'

const messageStore = useMessageStore()
const contacts = ref([])
const store = useUserStore()
const hasNewFriendRequest = ref(false)
const ws = ref(null)
// 获取联系人列表
const getContacts = () => {
  axiosInstance.get('/contact/list', {
    headers: {
      token: store.token
    }
  })
    .then((response) => {
      console.log(response)
      contacts.value = response.data.data
    })
    .catch((error) => {
      console.log(error)
    })
}
// 调用请求查看当前用户是否有好友申请
const hasNewFriends = () => {
  axiosInstance.get('/friend/hasNewFriendRequest')
    .then((response) => {
      console.log(response)
      hasNewFriendRequest.value = response.data.data
    })
    .catch((error) => {
      console.log(error)
    })
}
const connectWebSocket = () => {
  ws.value = new WebSocket(WS_BASE_URL + `/ws?token=${store.token}&contact=true`)

  ws.value.onopen = () => {
    console.log('建立连接')
  }

  ws.value.onmessage = (event) => {
    if (event.data === HEART_MESSAGE) {
      // 忽略心跳消息
      console.warn('接收到心跳消息......')
      return
    }
    const message = JSON.parse(event.data)
    if (message.type === 'contact') {
      hasNewFriendRequest.value = message.content
    }
    updateFriendApply()
  }

  ws.value.onclose = () => {
    console.log('连接关闭')
  }

  ws.value.onerror = (error) => {
    console.log(error)
  }
}
// 获取联系人详细
const handleContactDetail = (contact) => {
  router.push(`/contact/${contact.id}`)
}
// 获取好友申请
const handleFriendApply = () => {
  hasNewFriendRequest.value = false
  router.push('/reply')
}
// 更新红点
const updateFriendApply = () => {
  watchEffect(() => {
    messageStore.setUnreadFriendApply(hasNewFriendRequest.value)
  })
}
// 调用获取联系人列表
onMounted(() => {
  // 获取联系人
  getContacts()
  // 调用是否有好友申请
  hasNewFriends()
  // 连接ws
  connectWebSocket()
  // 更新红点
  updateFriendApply()
})
</script>

<template>
  <van-nav-bar title="通讯录" />
  <div class="contact-list">
    <ul>
      <li class="contact-item" @click="handleFriendApply">
        <img
          src="https://zzb-chat.oss-cn-beijing.aliyuncs.com/images.jpg"
          alt="头像"
          class="avatar"
        />
        <div class="contact-info" >
          <p class="nickname">新的朋友</p>
        </div>
        <span v-if="hasNewFriendRequest" class="notify-count"></span>
      </li>
      <li v-for="contact in contacts" :key="contact.id" class="contact-item">
        <img :src="contact.avatar" alt="头像" class="avatar" />
        <div class="contact-info" @click="handleContactDetail(contact)">
          <p class="nickname">{{ contact.nickname }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.contact-list {
  padding: 10px;
}

.contact-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px; /* 每个联系人之间的间距 */
  border-radius: 8px; /* 圆角 */
  background-color: #fff; /* 背景颜色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: all 0.3s ease; /* 过渡效果 */
}

.contact-item:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.contact-info {
  flex-grow: 1; /* 使信息部分占据可用空间 */
}

.notify-count {
  position: absolute; /* 推到右边 */
  background-color: red;
  border-radius: 50%; /* 圆形 */
  width: 8px;
  height: 8px;
  left: 45px;
  top: 10px;
}

.nickname {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
</style>
